<template>
  <n-card class="rd-8 shadow-sm" segmented>
    <template #header>
      <div f-y-c>
        <n-dropdown
          trigger="hover"
          :options="addMenuOption"
          @select="handleAddSelect"
        >
          <n-button type="primary" icon-placement="right" ghost>
            添加菜单
            <template #icon>
              <icon-mingcute-down-line />
            </template>
          </n-button>
        </n-dropdown>
        <n-button type="primary" ghost ml-10 @click="handlePack">
          {{ expandedKeys.length ? "全部收起" : "全部展开" }}
          <template #icon>
            <icon-jam-menu />
          </template>
        </n-button>
        <n-button quaternary ml-10 circle type="info" @click="getMenuTree">
          <template #icon>
            <refresh-icon />
          </template>
        </n-button>
      </div>
    </template>

    <div f-y-c>
      <n-input
        placeholder="请输入菜单名称搜索"
        v-model:value="menuPattern"
        clearable
      >
        <template #prefix>
          <icon-basil-search-outline text="18 gray" />
        </template>
      </n-input>
      <div mx-5></div>
      <n-tooltip trigger="hover">
        <template #trigger>
          <n-switch v-model:value="showIrrelevantMenus" w-80>
            <template #checked>展示</template>
            <template #unchecked>隐藏</template>
          </n-switch>
        </template>
        {{ showIrrelevantMenus ? "展示" : "隐藏" }}搜索无关的节点
      </n-tooltip>
    </div>
    <n-spin :show="loading">
      <n-tree
        ref="treeRef"
        mt-10
        block-line
        :data="menuTree"
        :pattern="menuPattern"
        virtual-scroll
        expand-on-click
        v-model:selected-keys="selectedKeys"
        v-model:expandedKeys="expandedKeys"
        :show-irrelevant-nodes="showIrrelevantMenus"
        :node-props="menuTreeNodeProps"
        :render-label="renderLabel"
        :style="{
          maxHeight: `${maxHeightComp}px`,
        }"
      ></n-tree>
    </n-spin>

    <n-dropdown
      trigger="manual"
      placement="bottom-start"
      v-model:show="dropdown.show"
      :x="dropdown.x"
      :y="dropdown.y"
      :options="dropdown.options"
      @select="addChildNode"
      @clickoutside="dropdown.show = false"
    />
  </n-card>
</template>

<script lang="ts" setup>
import type { DropdownOption } from "naive-ui";
import { useVModel, useElementBounding } from "@vueuse/core";
import { Props, Emits } from "./types";
import { useCreateTree, useSelcetOption, useExpand } from "./common";
import { BUTTON_CODE } from "../config";
import { useAppStore } from "@/store";

const props = defineProps<Props>();
const emits = defineEmits<Emits>();
const data = useVModel(props, "checkedMenu", emits);

const appStore = useAppStore();
const treeRef = ref();
const { top: treeTop } = useElementBounding(treeRef);
const maxHeightComp = computed(() => {
  const maxHeight = appStore.visibleHeight - treeTop.value - 40;
  return maxHeight < 1200 ? maxHeight : 1200;
});

const menuPattern = ref("");
const showIrrelevantMenus = ref(true);
const addMenuOption = computed<DropdownOption[]>(() => [
  { label: "添加顶级菜单", key: "add-root" },
  {
    label: "添加子菜单",
    key: "add-child",
    disabled: !data.value || data.value.type === BUTTON_CODE,
  },
]);

const {
  dropdown,
  rightClickMenu,
  menuTree,
  loading,
  renderLabel,
  getMenuTree,
} = useCreateTree();

const { selectedKeys, addChildNode, menuTreeNodeProps, handleAddSelect } =
  useSelcetOption(rightClickMenu, data, emits);

const { expandedKeys, handlePack } = useExpand(menuTree);

getMenuTree();
defineExpose({ getMenuTree });
</script>
